import { PageContainer, View } from "@tarojs/components";
import { useRouter } from "@tarojs/taro";

import ByCol from "@/components/ui/ByCol";
import ByCell from "@/components/ui/ByCell";
import ByRow from "@/components/ui/ByRow";
import Money from "@/components/app/Money";
import Card from "@/components/common/Card";
import Page from "@/components/common/Page";
import ByText from "@/components/ui/ByText";
import ByButton from "@/components/ui/ByButton";
import ByImageGroup from "@/components/ui/ByImageGroup";
import ApprovalaProcess from "@/components/app/ApprovalaProcess";

import ApiFinance from "@/api/finance";
import ApiWorkflow from "@/api/workflow";
import useFetch from "@/hooks/useFetch";
import useApproval from "@/hooks/useApproval";

import { TaskDetail } from "@/types/global";

/**
 * GetPaymentApplyResp
 */
interface GetPaymentApplyResp {
  /**
   * 申请金额
   */
  applyAmount: number;
  /**
   * 0 表示工程付款, 1.供应商材料款, 3.工人工资 7.售后维修费
   */
  billType: number;
  /**
   * 费用类别， 从付款模版获取
   */
  feeCategory: string;
  files?: string[];
  /**
   * 意向客户ID
   */
  intentCustomerId: number;
  /**
   * 付款阶段
   */
  paymentStage: string;
  /**
   * 备注
   */
  remark?: string;
  /**
   * 摘要, 从付款模版获取
   */
  summary: string;
  /**
   * 付款对象ID
   */
  tagetUserId: number;
  /**
   * 付款对象名称
   */
  tagetUserName: string;
  /**
   * 付款对象类型 0:施工人员,1:供应商，2:工人
   */
  tagetUserType: number;
  /**
   * 模板明细ID
   */
  templateDetailId: number;
  [property: string]: any;
}

export default () => {
  const { params } = useRouter();
  const paymentBillId = Number(params.paymentBillId || params.businessId);
  const workflowInstanceId = Number(params.wl_id);

  const { data } = useFetch<GetPaymentApplyResp>(
    ApiFinance.getPaymentApplyDetail,
    {
      showLoading: true,
      defaultParams: [{ paymentBillId }],
    }
  );

  // 审批流内容
  const { data: approveData, refresh } = useFetch<TaskDetail>(
    ApiWorkflow.detail,
    { defaultParams: [{ workflowInstanceId }] }
  );

  const {
    visible,
    approverNode,
    setApproveNode,
    PopupApproval,
    onApproved,
    onRejected,
    onCancal,
  } = useApproval(refresh);

  return (
    <>
      <Page
        footerSticky
        slotFooter={
          approverNode && (
            <ByRow content="around">
              <ByButton
                size="large"
                type="error"
                variant="filled"
                className="w-2/5"
                onClick={onRejected}
              >
                驳回
              </ByButton>

              <ByButton size="large" className="w-2/5" onClick={onApproved}>
                通过
              </ByButton>
            </ByRow>
          )
        }
      >
        <Card className="m-3">
          <ByCell label="费用类型" size="small">
            {data?.summary}
          </ByCell>

          <ByRow
            content="between"
            className="text-center bg-page rounded-md p-2 -mx-1"
          >
            <View>
              <Money size="sm" value={data?.payableAmount} />
              <ByText size="xs" type="third" block className="mt-1">
                应付款
              </ByText>
            </View>

            <View>
              <Money size="sm" value={data?.paidAmount} />
              <ByText size="xs" type="third" block className="mt-1">
                已付款
              </ByText>
            </View>

            <View>
              <Money size="sm" value={data?.appliedAmount} />
              <ByText size="xs" type="third" block className="mt-1">
                已申请
              </ByText>
            </View>
          </ByRow>

          <ByRow>
            <ByCol span={6}>
              <ByCell label="申请金额" vertical>
                <Money value={data?.applyAmount} />
              </ByCell>
            </ByCol>
            <ByCol span={6}>
              <ByCell label="付款对象" vertical>
                {data?.tagetUserName}
              </ByCell>
            </ByCol>
          </ByRow>

          <ByCell label="照片" vertical>
            <ByImageGroup urls={data?.files} showEmptyTip />
          </ByCell>

          <ByCell label="备注" vertical>
            {data?.remark}
          </ByCell>
        </Card>

        <Card className="m-3">
          {approveData && (
            <ApprovalaProcess
              showTitle
              source={approveData}
              onChangeStatus={setApproveNode}
            />
          )}
        </Card>
      </Page>

      <PageContainer round show={visible} onAfterLeave={onCancal}>
        <PopupApproval />
      </PageContainer>
    </>
  );
};
